@value bg-color, bg-color-dd, text-color, text-color-50 from '~assets/styles/vars.css';

:global {
  :local(.root) {
    &.SplitPane {
      position: relative !important;
      height: auto !important;
      overflow: visible !important; /* for showing context menu of the monaco editor */
    }

    & .Resizer {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background-color: bg-color;

      &:hover {
        background-color: bg-color-dd;

        &::before {
          border-color: text-color;
        }
      }

      &.horizontal {
        height: 10px;
        cursor: row-resize;

        &::before {
          content: '';
          height: 4px;
          width: 2em;
          border-top: 1px solid text-color-50;
          border-bottom: 1px solid text-color-50;
        }
      }

      &.vertical {
        position: sticky;
        top: 0;
        max-height: 100vh;
        width: 10px;
        cursor: col-resize;

        &::before {
          content: '';
          height: 2em;
          width: 4px;
          border-left: 1px solid text-color-50;
          border-right: 1px solid text-color-50;
        }
      }
    }
  }
}
